<template>
<div>
    <el-divider content-position="left">个人信息</el-divider>
    <el-descriptions  direction="vertical" :column="4" border="true">
    <el-descriptions-item label="工号">{{ teachers.t_id }}</el-descriptions-item>
    <el-descriptions-item label="姓名">{{ teachers.t_name }}</el-descriptions-item>
    <el-descriptions-item label="邮箱" :span="2">{{ teachers.t_email }}</el-descriptions-item>
    <el-descriptions-item label="电话">{{ teachers.t_tel }}</el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">管理的小组信息</el-divider>
    <el-table
    title="小组信息"
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column type="expand">
        <template slot-scope="scope">
            <el-table
            title="小组信息"
            :data=scope.row.students
            stripe
            style="width: 100%">
            <el-table-column
                label="学号"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.s_id  }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="姓名"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.s_name  }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="邮箱">
                <template slot-scope="scope">
                    <span>{{ scope.row.s_email  }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="手机号">
                <template slot-scope="scope">
                    <span>{{ scope.row.s_tel  }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="组长">
                <template slot-scope="scope">
                    <span>{{ scope.row.leader===0?'否':'是'  }}</span>
                </template>
            </el-table-column>
            </el-table>
        </template>
    </el-table-column>
    <el-table-column
        label="组号"
        width="180">
        <template slot-scope="scope">
            <span>{{ scope.row.group_id  }}</span>
        </template>
    </el-table-column>

    <el-table-column
        label="组长"
        width="180">
        <template slot-scope="scope">
            <span>{{ scope.row.students[0].s_name  }}</span>
        </template>
    </el-table-column>

    <el-table-column
        label="组员1">
        <template slot-scope="scope">
            <span>{{ scope.row.number>0? scope.row.students[0].s_name:""  }}</span>
        </template>
    </el-table-column>

    <el-table-column
        label="组员2">
        <template slot-scope="scope">
            <span>{{ scope.row.number>1? scope.row.students[1].s_name:""  }}</span>
        </template>
    </el-table-column>

    <el-table-column 
        label="组员3">
        <template slot-scope="scope">
            <span>{{ scope.row.number>2? scope.row.students[2].s_name:""  }}</span>
        </template>
    </el-table-column>

    <el-table-column 
        label="组员4">
        <template slot-scope="scope">
            <span>{{ scope.row.number>3? scope.row.students[3].s_name:""  }}</span>
        </template>
    </el-table-column>

    <el-table-column
        label="组员5">
        <template slot-scope="scope">
            <span>{{ scope.row.number>4? scope.row.students[4].s_name:""  }}</span>
        </template>
    </el-table-column>

    <el-table-column
        label="组员6">
        <template slot-scope="scope">
            <span>{{ scope.row.number>5? scope.row.students[5].s_name:""  }}</span>
        </template>
    </el-table-column>

    <el-table-column
        label="小组人数">
        <template slot-scope="scope">
            <span>{{ scope.row.number  }}</span>
        </template>
    </el-table-column>
    </el-table>
</div>

</template>

<script>
import { showInfor } from '@/api/user'
export default {

data() {
    return {
    teachers: { },
    tableData: [],
    }
},
created: function() {
    showInfor(this.$store.getters.token).then(response => {
    this.teachers = response.data.teachers
    this.tableData = response.data.list
    })
}

}

</script>
  
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>